<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JCROP测试</title>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="static/css/jquery.Jcrop.css" type="text/css">
<link rel="stylesheet" href="static/css/demos.css" type="text/css">
	<script type="text/javascript">
		$(document).ready(function(){
		      // Create variables (in this scope) to hold the API and image size
		      var jcrop_api, boundx, boundy;
		      
		      $('#target').Jcrop({
		        onChange: updatePreview,
		        onSelect: updatePreview,
		        onRelease:  clearCoords,
		        aspectRatio: 1
		      },function(){
		        // Use the API to get the real image size
		        var bounds = this.getBounds();
		        boundx = bounds[0];
		        boundy = bounds[1];
		        // Store the API in the jcrop_api variable
		        jcrop_api = this;
		      });

		      function updatePreview(c)
		      {
		    	  $('#x1').val(c.x);
			      $('#y1').val(c.y);
			      $('#x2').val(c.x2);
			      $('#y2').val(c.y2);
			      $('#w').val(c.w);
			      $('#h').val(c.h);
				  if (parseInt(c.w) > 0)
				  {
				    var rx = 100 / c.w;
				    var ry = 100 / c.h;
				
				    $('#preview').css({
				      width: Math.round(rx * boundx) + 'px',
				      height: Math.round(ry * boundy) + 'px',
				      marginLeft: '-' + Math.round(rx * c.x) + 'px',
				      marginTop: '-' + Math.round(ry * c.y) + 'px'
				    });
				  }
				};
			    function clearCoords()
			    {
			      $('#coords input').val('');
			      $('#h').css({color:'red'});
			      window.setTimeout(function(){
			        $('#h').css({color:'inherit'});
			      },500);
			    };
		    });
	</script>
</head>
<body>
	<img alt="sliverdang" src="static/pic/sliverdang.jpg" id="target" style="max-height: 500px;max-width:500px;">
	<div style="width:100px;height:100px;overflow:hidden;">
		<img src="static/pic/sliverdang.jpg" id="preview" alt="Preview" />
	</div>
	
	<form id="coords"
      class="coords"
      onsubmit="return false;"
      action="http://example.com/post.php">

      <div>
			<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
			<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
			<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
			<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
			<label>W <input type="text" size="4" id="w" name="w" /></label>
			<label>H <input type="text" size="4" id="h" name="h" /></label>
      </div>
		</form>
</body>
</html>